Skip to content

NPM Scripts

The package.json manifest file has one more interesting feature: it defines commands that can be run through the npm CLI. These are known as scripts

The “Word Game” project in this course, for example, comes with the following scripts:

{
  "scripts": {
    "dev": "parcel public/index.html",
    "build": "parcel build public/index.html",
    "new-component": "new-component"
  },
}

We run these scripts by typing npm run [scriptName]. For example, we can start a development server by running npm run dev.

While there are some conventional script names, like dev and build, we can name scripts whatever we want. They're like variable names.

Scripts can be any valid shell command. For example, we can define our own “hello world” script like this:

{
  "scripts": {
    "hello-world": "echo 'Hello World!'",
  },
}

When we run this script, the shell command will run, printing the string:

$ npm run hello-world
> Hello World!

Crucially, NPM scripts can access the dependencies installed in node_modules. Our dev command above has access to the parcel dependency.

Most React applications follow the same conventions:

  • dev (or sometimes start) will boot a local development server.
  • build will generate the HTML/CSS/JS needed to deploy a production application.